<template>
  <div>
    <h3>拖拽生成节点</h3>
    <div>
      <div>实体列表</div>
      <ul id="entityListentityList">
        <!-- $event可以获取事件 -->
        <li v-for="item in entityList" :key="item" draggable="true" @dragstart="dragstart($event, item, 'entity')" @drag="drag" @dragend="dragend">
          {{item}}
        </li>
      </ul>
    </div>

    <div>
      <div>属性列表</div>
      <ul id="propertyList">
        <!-- $event可以获取事件 -->
        <li v-for="item in propertyList" :key="item" draggable="true" @dragstart="dragstart($event, item, 'property')" @drag="drag" @dragend="dragend">
          {{item}}
        </li>
      </ul>

    </div>

    <div @dragenter="dragenter" @dragover="dragover" @dragleave="dragleave" @drop="drop">
      <div ref="myDiagram1" id="myDiagram1" style="border: solid 1px black; width:400px; height:200px"></div>
    </div>
  </div>
</template>

<script>
import go from 'gojs'

export default {
  mounted () {
    this.initMyDiagram1();
  },
  data () {
    return {
      entityList: ["个人", "火车", "飞机", "菜谱", "食物"],
      propertyList: ["名称", "创建时间", "价格"],
      diagram: null,
    }
  },
  methods: {
    initMyDiagram1 () {
      let diagram = new go.Diagram("myDiagram1");
      this.diagram = diagram;
      diagram.nodeTemplate =
        new go.Node(
          // 垂直布局，上面图片，下面文字
          "Vertical",
          // 配置
          {
            //background: "#44CCFF" // 节点的背景颜色
          })
          .add(
            new go.Picture(
              // 配置
              {
                margin: 10,
                width: 50,
                height: 50,
                background: "red"
              }
            ).bind("source", "key") // 图片绑定modelData的source字段
          )
          .add(
            new go.TextBlock(
              "Default Text",  // 默认文字
              // 配置
              {
                margin: 12,
                stroke: "black", // 字体颜色
                font: "bold 16px sans-serif"
              })
              .bind("text", "key") // 文字绑定modelData的name字段
          );


      diagram.model = new go.GraphLinksModel(
        // 节点数据
        [
          //   { key: "Hello" },
          //   { key: "World!" }
        ],
        // 关系
        [
          // { from: "Hello", to: "World!" }
        ]
      );


    },
    /** 开始拖拽 可拖动元素时触发 */
    dragstart (dragEvent, item, type) {
      dragEvent.dataTransfer.setData('dragItemType', type);
      dragEvent.dataTransfer.setData('dragItem', item);
    },
    /** 拖拽 可拖动元素 的过程中触发 */
    drag () {
      //   console.log("drag");
    },
    /** 拖拽释放 可拖动元素 时触发 */
    dragend () {
      console.log("dragend");
    },

    /** 当拖拽 可拖动元素 进入容器中时触发 */
    dragenter () {
      console.log("dragenter");
    },
    /** 在容器中 拖拽 可拖动元素过程中触发 */
    dragover (dragEvent) {
      dragEvent.preventDefault();
    },
    /** 当拖拽 可拖动元素 离开容器中时触发 */
    dragleave () {
      console.log("dragleave");
    },
    /** 在容器中，拖拽释放 可拖动元素时触发 */
    drop (dragEvent) {
      console.log(dragEvent)
      console.log("drop")

      let dragItemType = dragEvent.dataTransfer.getData('dragItemType');
      let dragItem = dragEvent.dataTransfer.getData('dragItem');
      // 添加节点
      if (dragItemType == "entity") {
        this.diagram.model.addNodeData({ key: dragItem });
        // TODO 
        // 并且根据释放鼠标的位置设置节点在图表中的位置
      }
      // 添加属性
      else {
        // js拖动到canvas里，获取目标元素？怎么可以不用实现
        // 可以获取goJs里选中的节点，然后给该节点添加属性就可以了
        console.log(dragItem)
        let nodeOrLinkList = this.diagram.selection;
        nodeOrLinkList.each((nodeOrLink) => {
          if (nodeOrLink instanceof go.Node) {
            //获取选中节点
            let key = nodeOrLink.data.key;
            console.log(key)
          } else if (nodeOrLink instanceof go.Link) {
            //获取选中的连线
            var from = nodeOrLink.data.from;
            var to = nodeOrLink.data.to;
          }
        })
      }
    },

  }

}
</script>

<style>
</style>